import React, { useState } from "react";
import { Table, Spin } from "antd";
import styles from "./index.module.less";
import Left from "./Left.tsx"
import Right from "./Right.tsx"
import Case from "./case.tsx"


const App: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [columns, setColumns] = useState([
    {
      title: '属性关系名称',
      dataIndex: 'type',
      render: text => <a>{text}</a>,
    },
    {
      title: '头实体',
      dataIndex: 'from_id',
    },
    {
      title: '尾实体',
      dataIndex: 'to_id',
    },
  ]);
  const [data, setData] = useState([]);
  const [params, setParams] = useState({});
  const [color, setColor] = useState([]);
  const colors = (res) => {
    setColor(res);
  }
  const getParams = (param, load) => {
    setParams(param);
    setLoading(load);
  }
  const getRelations = (relations, load) => {
    relations.forEach((item, index) => {
      item.key = index;
    })
    setData(relations);
    setLoading(load);
  }

  return (
    <div className={styles.body}>
      <Left onColors={colors}></Left>
      <div className={styles.middle_card}>
        <Case colors={color} getParams={getParams} getRelations={getRelations} ></Case>
        <div className={styles.middle_bottom}>
          <Spin spinning={loading} tip="loading" className={styles.loading} size="large">
            <Table
              columns={columns}
              dataSource={data}
              bordered
              pagination={false}
              scroll={{ y:180 }}
            />
          </Spin>
        </div>
      </div>
      <Right params={params}></Right>
    </div>
  );
};

export default App;
